<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		button.active {
			background: red;
		}
	</style>
</head>
<body>
<button data-type="1">正在热映</button>
<button data-type="2">即将上映</button>
<div id="root"></div>
</body>
<script>
	const btns = document.querySelectorAll("button");
	let activeIndex = 0;
	btns[activeIndex].className = "active";
	btns.forEach((btn, index) => {
		btn.onclick = function () {
			if(activeIndex === index) return;
			btns[activeIndex].className = null;
			activeIndex = index;
			btns[activeIndex].className = "active";
			getFilmList(this.dataset.type);
		}
	})
	getFilmList()
	function getFilmList(type=1) {
		root.innerHTML = "<h3>正在拼命加载中……</h3>";
		const xhr = new XMLHttpRequest();
		xhr.responseType = "json";
		xhr.open("get", "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=" + type + "&k=7792974");
		xhr.setRequestHeader("X-Client-Info", '{"a":"3000","ch":"1002","v":"5.2.1","e":"1700528385332765476159489","bc":"110100"}');
		xhr.setRequestHeader("X-Host", 'mall.film-ticket.film.list')
		xhr.send();
		xhr.onload = function () {
			console.log(xhr.response);
			root.innerHTML = xhr.response.data.films.map(item => (`
				<div>
					<h3>${item.name}</h3>
					<img height="200" src="${item.poster}"/>
					<hr/>
				</div>
			`)).join("")
		}
	}
	
	// https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=7792974
	// const xhr = new XMLHttpRequest();
	// xhr.responseType = "json";
	// xhr.open("get","https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=7792974");
	// xhr.setRequestHeader("X-Client-Info",'{"a":"3000","ch":"1002","v":"5.2.1","e":"1700528385332765476159489","bc":"110100"}');
	// xhr.setRequestHeader("X-Host",'mall.film-ticket.film.list')
	// xhr.send();
	// xhr.onload = function(){
	// 	console.log(xhr.response);
	// }
</script>
</html>